<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>警情散点图</title>
    <link rel="stylesheet" href="../../../css/main.css">
    <script src="../../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../mapData/js/echarts/echarts.js"></script>
    <script src="../../../mapData/js/map/china.js"></script>
    <script src="../../../js/echartsEncapsulation/echartsClass.js"></script>
</head>
<body>
<div id="scatterMap" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    /*
     * echarts 封装调用
     *
     * 该类主要包括echarts option对象属性的读取
     * 业务数据获取
     * 地图加载
     * loadBusinessData()
     * loadMap()
     */
    /*$(function()
    {
        // 初始echars类
        var echartsClass = new EchartsClass(function();
        {
            // 业务数据请求url
            var url = "";
            // 构造业务查询条件
            var queryBo = new Object();
            queryBo.startDate = "";
            //此处自行构建。。。。。

            // 构造mapOption对象
            var mapObj = Object();
            mapObj.url = ""; // 地图geo数据url
            mapObj.id = ""; //  地图id
            mapObj.text = "警情散点图" // 设置地标题
            mapObj.zoom = ""; // 地图缩放等级
            mapObj.center = []; // 地图中心点
            mapObj.visualMap = ""; // 数据值域
            mapObj.x = ""; // 图例x轴位置 左、中、右英文
            mapObj.y = ""; // 图例y轴位置 上、中、下英文

            mapObj.type = ""; // 系列类型
            mapObj.symbol = ""; // 覆盖物标记，可自定义图标
            mapObj.symbolSize = ""; // 覆盖物大小，可数字，可数组
            mapObj.formatter = "自己定义一个return函数自定义格式";

            mapObj.type1 = ""; // 系列类型
            mapObj.symbol1 = ""; // 覆盖物标记，可自定义图标
            mapObj.symbolSize1 = ""; // 覆盖物大小，可数字，可数组

            mapObj.type1 = ""; // 系列类型
            mapObj.symbol1 = ""; // 覆盖物标记，可自定义图标
            mapObj.symbolSize1 = ""; // 覆盖物大小，可数字，可数组
            echartsClass.loadScatterMapBusinessData(url,queryBo,mapObj);
        });
    });*/



    var mapOption;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。

    var yeardata  = [
        {month:"1月", alarm:[{name:"大罗",value:[113.169518,36.169646,'2018-05-11 15:56:23','撞一行人']},
                             {name:"化家庄",value:[113.101746,36.219723,'2018-05-11 15:56:23','撞一摩托车']}],
                      majorAlarm:[{name:"潞卓广场",value:[113.117810,36.213940,'2018-05-11 15:56:23','撞一行人']}]
        },
        {month:"2月", alarm:[{name:"康宝幼儿园",value:[113.091896,36.213734,'2018-05-11 15:56:23','辆车相刮']},
                             {name:"广场南口",value:[113.112387,36.204636,'2018-05-11 15:56:23','两车追尾']}],
                      majorAlarm:[{name:"妇幼保健院－孕产妇抢救中心",value:[113.199020,336.106064,'2018-05-11 15:56:23','撞一行人']}]
        },
        {month:"3月", alarm:[{name:"潞州宴",value:[113.123375,36.218933,'2018-05-11 15:56:23','撞电线杆']},
                             {name:"长兴中路捉马卫生巷",value:[113.131064,36.207735,'2018-05-11 15:56:23','撞电线杆']}],
                      majorAlarm:[{name:"西南关小区",value:[113.091035,36.169083,'2018-05-11 15:56:23','撞一行人']}]
        },
        {month:"4月", alarm:[{name:"紫金房豆捞",value:[113.097880,36.200115,'2018-05-11 15:56:23','两车追尾']},
                             {name:"北寨",value:[113.043401,36.221423,'2018-05-11 15:56:23','辆车相刮']}],
                      majorAlarm:[{name:"建东小学",value:[113.121440,36.201720,'2018-05-11 15:56:23','辆车相刮']}]
        },
        {month:"5月", alarm:[{name:"南街新华书店",value:[113.103539,36.181983,'2018-05-11 15:56:23','撞一摩托车']}]},
        {month:"6月", alarm:[{name:"八一广场西口",value:[113.113045,36.203480,'2018-05-11 15:56:23','撞一行人']}]},
        {month:"7月", alarm:[{name:"309张公庄路口",value:[113.070768,36.191907,'2018-05-11 15:56:23','撞一行人']}]},
        {month:"8月", alarm:[{name:"黄碾",value:[113.118933,36.363802,'2018-05-11 15:56:23','撞一行人']}]},
        {month:"9月", alarm:[{name:"金威名店十字路口",value:[113.104126,36.182400,'2018-05-11 15:56:23','撞一行人']}]},
        {month:"10月", alarm:[{name:"长治市堠北庄镇张祖村民委员会",value:[113.033550,36.241394,'2018-05-11 15:56:23','撞一行人']}]},
        {month:"11月", alarm:[{name:"长北晋东南幼师",value:[113.115295,36.298479,'2018-05-11 15:56:23','撞一行人']}]},
        {month:"12月", alarm:[{name:"清华十字",value:[113.103274,36.156168,'2018-05-11 15:56:23','撞一行人']}]}
    ];

    var mapChart = echarts.init(document.getElementById('scatterMap'));// 初始化echarts对象为mapChart

    /*
     * 读取echarts Option配置数据
     */
    $(function()
    {
        getOption();
    });
    /*
     * 读取echarts Option配置数据
     */
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../../config/scatter_timeline_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            mapOption = option;
            getMap();
        });
    }
     /*
      * 读取geo地图数据并注入echarts api
      */
    function getMap()
    {
        // 数据加载项，增强用户体验
        //mapChart.showLoading();
        // 地图json文件的地址
        var mapUrl = "../../../mapData/map/json/shanxi/changzhi.json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            echarts.registerMap("chanzghi", json); // 注册地图
            mapOption.baseOption.geo.map = "chanzghi"; // 设置geo坐标系地图名称
            mapOption.baseOption.geo.zoom = 2; // 设置地图缩放等级
            mapOption.baseOption.geo.center = [113.101211,36.218388];// 设置地图中心点
            mapOption.baseOption.visualMap = "";//由于此处不需要值域渐变，所以设置为空
            mapOption.baseOption.legend.data = ["一般警情","重大警情","岗点"];//图例data设置
            mapOption.baseOption.legend.x = "right";//图例x轴位置 左、中、右英文
            mapOption.baseOption.legend.y = "top";//图例y轴位置 上、中、下英文
            mapOption.baseOption.timeline.autoPlay = false;//h设置时间轴是否加载播放 false,true
            mapOption.baseOption.timeline.axisType = "category"//设置时间轴的位置value数值轴，适用于连续数据category类目轴，适用于离散的类目数据time时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度
            /*
             * 系列一数据和图标设置
             */
            mapOption.baseOption.series[0].type = "scatter";//自定义图标类型，此处可以设置scatter、effectScatter。
            mapOption.baseOption.series[0].name = "一般警情";// 自定义图列名称。
            mapOption.baseOption.series[0].symbol = "image://../../../images/mapIcons/blue.png";//自定义点位图标。
            mapOption.baseOption.series[0].symbolSize = [10,10];// 设置图标大小,此处可以是数字或者数组
            mapOption.baseOption.tooltip.formatter = displayContent;// 设置内容展示
            //mapOption.baseOption.series[0].data = data; // 设置业务数据
            /*
             * 系列三数据和图标设置
             */
            mapOption.baseOption.series[1].type1 = "scatter";//自定义图标类型，此处可以设置scatter、effectScatter。
            mapOption.baseOption.series[1].name = "重大警情";// 自定义图列名称。
            mapOption.baseOption.series[1].symbol = "image://../../../images/mapIcons/red.png";//自定义点位图标。
            mapOption.baseOption.series[1].symbolSize = [10,10];// 设置图标大小,此处可以是数字或者数组
            mapOption.baseOption.tooltip.formatter = displayContent;// 设置内容展示
            //mapOption.baseOption.series[1].data = data1; // 设置业务数据
            /*
             * 系列三数据和图标设置
             */
            mapOption.baseOption.series[2].type = "effectScatter";//自定义图标类型，此处可以设置scatter、effectScatter。
            mapOption.baseOption.series[2].name = "岗点";// 自定义图列名称。
            mapOption.baseOption.series[2].symbol = "";//image://../images/mapIcons/blue.png";//自定义点位图标。
            mapOption.baseOption.series[2].symbolSize = 10;//[22,26];// 设置图标大小,此处可以是数字或者数组
            mapOption.baseOption.tooltip.formatter = displayContent;// 设置内容展示
            //mapOption.baseOption.series[2].data = data2; // 设置业务数据
            for(var index = 0; index < yeardata.length; index ++)
            {
                var type = yeardata[index].month;//获取是哪一月
                var alarm  = yeardata[index].alarm;//获取对应月的警情数据
                var majorAlarm = yeardata[index].majorAlarm;//获取对应月的重大警情数据
                if(yeardata[index].month == "1月")
                {
                    mapOption.options[0].series[0].data = alarm; // 设置业务数据
                    mapOption.options[0].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "2月")
                {
                    mapOption.options[1].series[0].data = alarm; // 设置业务数据
                    mapOption.options[1].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "3月")
                {
                    mapOption.options[2].series[0].data = alarm; // 设置业务数据
                    mapOption.options[2].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "4月")
                {
                    mapOption.options[3].series[0].data = alarm; // 设置业务数据
                    mapOption.options[3].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "5月")
                {
                    mapOption.options[4].series[0].data = alarm; // 设置业务数据
                    mapOption.options[4].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "6月")
                {
                    mapOption.options[5].series[0].data = alarm; // 设置业务数据
                    mapOption.options[5].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "7月")
                {
                    mapOption.options[6].series[0].data = alarm; // 设置业务数据
                    mapOption.options[6].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "8月")
                {
                    mapOption.options[7].series[0].data = alarm; // 设置业务数据
                    mapOption.options[7].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "9月")
                {
                    mapOption.options[8].series[0].data = alarm; // 设置业务数据
                    mapOption.options[8].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "10月")
                {
                    mapOption.options[9].series[0].data = alarm; // 设置业务数据
                    mapOption.options[9].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "11月")
                {
                    mapOption.options[10].series[0].data = alarm; // 设置业务数据
                    mapOption.options[10].series[1].data = majorAlarm; // 设置业务数据
                }
                if(yeardata[index].month == "12月")
                {
                    mapOption.options[11].series[0].data = alarm; // 设置业务数据
                    mapOption.options[11].series[1].data = majorAlarm; // 设置业务数据
                }
            }
            mapChart.setOption(mapOption);// 把加工好的mapOption注入echarts api。
            // 数据加载项，增强用户体验
            //mapChart.hideLoading();
        });
    }
    /*
     * 设置覆盖物鼠标移上去的展示形式，此处可以自定义，可以做成弹出框等等
     */
    var displayContent = function (params)
    {
        return params.data.name;
    }
    //setInterval(getMap, 2000);
</script>
</html>